<template>
    <div class="address-edit">
        <nav-bar :title="title"></nav-bar>
        <div id="allmap"></div>
        <van-popup v-model="show" round position="bottom" :style="{ height: '40%' }">
            <van-area title="收货地址" :area-list="areaList" @cancel="cancel" @confirm="confirm" :value="address.code" />
        </van-popup>
        <div class="address-box">
            <van-cell title="选择收货地址" is-link @click="(show = true)" :value="harvestAddress" />

            <van-form>
                <van-field v-model="address.address" name="详细地址" label="详细地址" placeholder="详细地址" />
                <van-field v-model="address.name" name="name" label="姓名" placeholder="姓名" />
                <van-field v-model="address.phone" name="phoneNumber" label="手机号" placeholder="手机号" />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit" @click="delAddress" style="margin:10px 0;" v-show="type == 1">
                        删除地址
                    </van-button>
                    <van-button round block type="info" native-type="submit" @click="onSubmit">
                        {{title}}
                    </van-button>
                </div>
            </van-form>

        </div>

    </div>
</template>

<script>
import NavBar from '@/components/navbar/NavBar.vue'
import { areaList } from '@vant/area-data';
import addressAPI from '@/api/address';

export default {
    components: { NavBar },
    //type=0 为添加地址; type=1为修改地址

    data() {
        return {
            title: '',
            type: '',
            show: false,
            areaList,
            address:{
                province: null,
                city: null,
                address: null,
                region: null,
                longitude: null,
                latitude: null,
                phone: null,
                name: null,
                code: '',
            },
        }
    },
    computed: {
        harvestAddress() {
            if (this.address.province == null || this.address.city == null || this.address.region == null) return ''

            else return this.address.province + '/' + this.address.city + '/' + this.address.region
        }
    },
    mounted(){
        this.createMap()
    },
    created() {
        this.type = this.$route.params.type
        this.title = this.type == 0 ? '添加地址' : '修改地址'
        
        if (this.type == 1) {
            let address = JSON.parse(sessionStorage.getItem("address"))

            this.address = {...address}
        }
    },
    methods: {
        onSubmit() {
            //添加地址
            if (this.type == 0) {
                addressAPI.addAddress(this.address)
                .then(res => {
                    if(res.code == 200){
                        this.$toast(res.message)
                        this.$router.push({name: 'myAddress'})

                    }else this.$toast(res.message)
                })
            }
            //修改地址
            else {
                addressAPI.updateAddress(this.address)
                .then(res => {
                    if(res.code == 200){
                        this.$toast(res.message)

                    }else this.$toast(res.message)
                })
            }

        },
        delAddress(){
            addressAPI.delAddress(this.address)
            .then(res => {
                if(res.code == 200){
                    this.$toast(res.message)
                    this.$router.push({name: 'myAddress'})
                }else this.$toast(res.message)
            })
        },
        cancel() {
            this.show = false
        },
        confirm(res) {
            this.show = false
            this.province = res[0].name
            this.city = res[1].name
            this.region = res[2].name

            console.log(res)

        },
        setArea(region){
            addressAPI.getCode(region)
            .then(res => {
                let data = JSON.parse(res.data.data)
                
                this.address.code = data.districts[0].code
            })
        },
        createMap() {

            if (this.map != null) return

            this.map = new BMapGL.Map("allmap");

            let longitude = '110.64447344977626'
            let latitude = '27.103587453347043'

            longitude = this.longitude ? this.longitude : longitude
            latitude = this.latitude ? this.latitude: latitude

            this.map.centerAndZoom(new BMapGL.Point(longitude, latitude), 18);
            this.map.enableScrollWheelZoom(true);
            this.map.enableDragging()

            let map = this.map
            let that = this

            let geoc = new BMapGL.Geocoder();
            this.map.addEventListener('click', function (e) {
                that.address.longitude = e.latlng.lng
                that.address.latitude = e.latlng.lat

                let pt = e.latlng;

                map.clearOverlays();

                let marker = new BMapGL.Marker(new BMapGL.Point(pt.lng, pt.lat));
                map.addOverlay(marker);

                geoc.getLocation(pt, function (rs) {
                    let addComp = rs.addressComponents;

                    that.address.province = addComp.province
                    that.address.city = addComp.city
                    that.address.region = addComp.district
                    that.setArea(that.address.region)
                    that.address.address = addComp.street + addComp.streetNumber
                })
            });

        },
    }
}
</script>

<style scoped>
.address-box {
    padding: 10px;

    background-color: white;

    text-align: left;
}

#allmap {
    width: 90%;
    height: 200px;

    margin: auto;

    margin-bottom: 10px
}
</style>